<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">发布动态</view>
		</view>
		<view class="main-content">
			<view class="input-title">
				<input type="text" placeholder="请输入标题（必填）" />
			</view>
			<view class="input-text">
				<textarea placeholder="请输入内容"></textarea>
			</view>
			<view class="upload-images">
				<view class="add-image-btn"></view>
			</view>
			<view class="bottom-btn">发表动态</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		}
	}
}
</script>

<style>
.input-title {
	width: 100%;
	height: 20vmin;
	font-size: 6vmin;
	border-bottom: 0.1vmin solid #000;
}

.input-title input {
	height: 20vmin;
	line-height: 20vmin;
}

.input-text {
	font-size: 4vmin;
	margin: 3vmin 0;
}

.upload-images {
	padding-bottom: 30vmin;
}

.add-image-btn {
	--box-size: 25vmin;
	margin: 3vmin;
    width: var(--box-size);
    height: var(--box-size);
	background-color: #eee;
	border: 1vmin dashed #ddd;
	border-radius: 2vmin;
	position: relative;
}

.add-image-btn::before,
.add-image-btn::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #ddd;
}

.add-image-btn::before {
	width: 1vmin;
	height: 8vmin;
}

.add-image-btn::after {
	width: 8vmin;
	height: 1vmin;
}

.bottom-btn {
	position: fixed;
	left: 50%;
	bottom: 15vmin;
	width: 80vw;
	height: 10vmin;
	transform: translateX(-50%);
	color: #fff;
	background-color: rgb(117, 117, 117);
	border-radius: 4vmin;
	font-size: 4vmin;
	font-weight: 900;
	text-align: center;
	line-height: 10vmin;
}

</style>
